<template>
  <view>
    <view :style="[joinStyle]" v-if="show">
      <image @click="onOpenCard" class="w-full" :src="imgUrl" mode="widthFix" ></image>
    </view>
  </view>
</template>

<script>
import {getAliVip} from "@/api/leaseOrder";

export default {
  name: 'alipay_vip',
  props: {
    dataConfig: {
      type: Object,
      default: () => {}
    },
    type: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      show:true,
      imgUrl: '',
      vipInfo:{}
    }
  },
  computed: {
    joinStyle() {
      if(this.type==='user'){
        return {
          'padding' : '20rpx'
        }
      }else{
        return {
          'padding-top': `${this.dataConfig.topConfig.val}rpx`,
          'padding-bottom': `${this.dataConfig.bottomConfig.val}rpx`,
          'padding-left': `${this.dataConfig.prConfig.val}rpx`,
          'padding-right': `${this.dataConfig.prConfig.val}rpx`,
        };
      }
    },
  },
  mounted() {
    this.getAliVip()
    // 个人中心
    if(this.type==='user'){
      this.imgUrl = this.dataConfig.imgUrl
      this.show = this.dataConfig.is_show==1?true:false
    }else{
      // 首页
      this.imgUrl = this.dataConfig.imgConfig.url
    }
  },
  methods: {
    // 会员详情
    getAliVip(){
      getAliVip().then(res=>{
        if(res.status==200){
          this.vipInfo = res.data
          console.log('vipInfo',this.vipInfo)
        }
      })
    },
    // 领取会员卡
    onOpenCard(){
      var plugin = requirePlugin("alipassToolKit") // 引用名称需与 app.json 中定义名称相同
      let params = {
        cardParams:{
          templateId:this.vipInfo.template_id, // 开卡的卡模板ID
          templateAppId:this.vipInfo.appid, // 卡模板ID 所关联的 AppId
          pageType:'half',//默认是 half
        },
        callback: function (res) {
          console.log('======领取会员卡回调', res)
          if (res.success === true) {
            console.log('======领取成功 success')
            uni.navigateTo({
              url: '/pages/annex/vip_paid/index',
            })
          }
        }
      }
      plugin.openCard(params);// 接口参数说明如下
    },
  },
}
</script>

<style lang="scss" scoped>

</style>